<template>
  <div>
    <nut-popup
      position="bottom"
      :style="{ borderRadius: '10px 10px 0 0 ', padding: 0 }"
      v-model:visible="isVisible"
    >
      <div class="addModel">
        <div class="flex flexBetween padding">
          <div class="address">新建自提点</div>
          <nut-icon name="close" class="close" @click="onClose"></nut-icon>
        </div>
        <div>
          <nut-form :model-value="formData" :rules="rules" ref="ruleForm">
            <nut-form-item label="自提点名称" prop="place_name" required>
              <input
                class="nut-input-text"
                v-model="formData.place_name"
                placeholder="请输入自提点名称"
                type="text"
              />
            </nut-form-item>
            <nut-form-item label="位置" prop="city_province" required>
              <nut-input
                class="nut-input-text"
                v-model="formData.city_province as any"
                placeholder="请选择"
                type="text"
                right-icon="rect-right"
                readonly
                @click="showAddress"
                style="color: #999"
              />
              <nut-cascader
                title="地址选择"
                v-model:visible="state.visible"
                v-model="formData.city_province as any"
                text-key="label"
                value-key="label"
                children-key="children"
                :options="options"
              ></nut-cascader>
            </nut-form-item>
            <nut-form-item label="详细地址" prop="detail_address" required>
              <input
                class="nut-input-text"
                maxlength="100"
                v-model="formData.detail_address"
                placeholder="请选择街道、楼牌号等"
                type="text"
              />
            </nut-form-item>

            <div class="nbg"></div>
            <nut-form-item
              label="自提点联系"
              prop="contact_person"
              required
              style="font-size: 1px"
            >
              <input
                maxlength="10"
                class="nut-input-text"
                v-model="formData.contact_person"
                placeholder="请输入自提联系人"
                type="text"
              />
            </nut-form-item>
            <nut-form-item
              label="自提点电话"
              prop="phone"
              required
              :rules="[
                {
                  regex:
                    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                  message: '手机号码填写不正确',
                },
              ]"
            >
              <input
                class="nut-input-text"
                v-model="formData.phone"
                placeholder="请输入联系电话"
                type="text"
              />
            </nut-form-item>

            <nut-cell>
              <nut-cell v-if="formData.type == EditType.ADD">
                <nut-button
                  type="primary"
                  block
                  color="linear-gradient(to right, #3EBD33, #9FDF4F)"
                  style="margin-right: 10px"
                  v-preventReClick
                  @click="submit"
                  >保存</nut-button
                >
              </nut-cell>
              <nut-cell v-else class="flex">
                <nut-button
                  block
                  class="f1"
                  style="
                    margin-right: 10px;
                    color: #40ae36;
                    border-color: #40ae36;
                  "
                  @click="onDelete"
                  >删除</nut-button
                >
                <nut-button
                  type="primary"
                  block
                  class="f1"
                  color="linear-gradient(to right, #3EBD33, #9FDF4F)"
                  @click="submit"
                  v-preventReClick
                  >保存</nut-button
                >
              </nut-cell>
            </nut-cell>
          </nut-form>
        </div>
      </div>
    </nut-popup>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, nextTick, ref } from "vue";
import { Toast } from "@nutui/nutui";
import { EditType } from "@/type/BaseEnum";
import useInstance from "@/hooks/useInstance";
import PROVICE from "@/utils/provice";
import { ZiTiType } from "@/api/manage/MangeModel";
import { insertApi, editApi, delApi } from "@/api/manage";
const { global } = useInstance();
const ruleForm = ref<any>(null);
const isVisible = ref<boolean>(false);
const disabled = ref<boolean>(true);
const options = ref<any>([]);
//注册事件
const emits = defineEmits(["reFresh"]);
const formData = reactive<ZiTiType>({
  id: undefined,
  contact_person: "",
  city_province: "",
  phone: "",
  detail_address: "",
  place_name: "",
  type: undefined,
});
// 自定义属性名称
const state = reactive({
  visible: false,
});
const rules = {
  place_name: [
    {
      required: true,
      message: "请输入自提点名称",
    },
  ],
  detail_address: [{ required: true, message: "请输入详细地址" }],
  city_province: [{ required: true, message: "请选择" }],
  phone: [{ required: true, message: "请填写电话" }],
  contact_person: [{ required: true, message: "请输入自提联系人" }],
};
const onClose = () => {
  isVisible.value = false;
};
const reset = () => {
  (formData.id = undefined),
    (formData.contact_person = ""),
    (formData.city_province = ""),
    (formData.phone = ""),
    (formData.detail_address = ""),
    (formData.place_name = ""),
    (formData.type = undefined);
};
const showAddress = () => {
  state.visible = true;
};

const show = (type: string, row: any) => {
  reset();
  options.value = PROVICE;
  if (type === EditType.ADD) {
  } else {
    nextTick(() => {
      //把要编辑的数据复制到表单绑定的对象
      global.$objCoppy(row, formData);
    });
  }
  isVisible.value = true;
  formData.type = type;
};

const submit = () => {
  ruleForm.value.validate().then(async ({ valid, errors }: any) => {
    if (valid) {
      disabled.value = false;
      let res = null;
      if (formData.type == EditType.ADD) {
        res = await insertApi(formData as any);
      } else {
        res = await editApi(formData as any);
      }
      if (res && res.code == 0) {
        Toast.success(formData.type == EditType.ADD ? "新增成功" : "编辑成功");

        emits("reFresh");
        onClose();
      }
    } else {
      console.log("error submit!!", errors);
    }
  });
};

const onDelete = async () => {
  //信息确定
  let confirm = await global.$myconfirm("确定删除该数据吗?");

  if (confirm) {
    let res = await delApi({
      id: formData.id,
    });

    if (res && res.code == 0) {
      Toast.success("删除成功");
      emits("reFresh");
      onClose();
    }
  }
};
defineExpose({
  show,
});
</script>
<style scoped lang="scss">
.addModel {
  border-radius: 20px 20px 0 0;
}

.padding {
  padding: 36px 30px;
}

.address {
  font-size: 32px;
  font-weight: bold;
  color: #000;
}

.close {
  font-size: 26px !important;
  font-weight: bold;
}

.nbg {
  height: 20px;
  background: #f8f9fa;
}
</style>
